<template>
    <div>
        <!-- 头部信息展示 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="once">
                    <img :src="src3" alt="" />
                    <el-statistic group-separator="," :value="totalOrder" title="用户数量">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="once">
                    <img :src="src3" alt="" />
                    <el-statistic group-separator="," :value="totalAmount" title="主机数量">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="once">
                    <img :src="src3" alt="" />
                    <el-statistic group-separator="," :value="todayOrder" title="告警数量">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="once">
                    <img :src="src3" alt="" />
                    <el-statistic group-separator="," :value="totayAmount" title="业务数量">
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
        <!-- 下面内容 -->
        <el-col class="content" :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
            <!-- 左边图表 -->
            <div class="left">
                <el-card class="mb20">
                    <div>
                        <PieFlatChart height="290px" />
                    </div>
                </el-card>
            </div>
            <!-- 右边图表 -->
            <div class="right">
                <el-card class="mb20">
                    <div>
                        <PieFilletChart height="290px" />
                    </div>
                </el-card>
            </div>
        </el-col>
        <!-- 下面列表 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="用户编号"> </el-table-column>
            <el-table-column prop="name" label="用户名称"> </el-table-column>
            <el-table-column prop="name" label="所属部门"> </el-table-column>
            <el-table-column prop="name" label="创建时间"> </el-table-column>
            <el-table-column prop="address" label="手机号">
                <template slot-scope="scope">
                    <el-tag> {{ scope.row.address }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import LineHeapChart from "@/views/dashboard/chart-tm/LineHeapChart";
import PieFlatChart from "@/views/dashboard/chart-tm/PieFlatChart";
import PieFilletChart from "@/views/dashboard/chart-tm/PieFilletChart";
export default {
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
            src1: require("../assets/images/total_order.png"),
            src2: require("../assets/images/sale.png"),
            src3: require("../assets/images/order.png"),
            src4: require("../assets/images/total_sale.png"),
            //总订单
            totalOrder: 100,
            //总销售额
            totalAmount: 666,
            //今日订单
            todayOrder: 777,
            //今日销售额
            totayAmount: 999,
        };
    },
    name: "index",
    components: {
        LineHeapChart,
        PieFlatChart,
        PieFilletChart,
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.el-statistic {
    width: 80px;
}

.once {
    background-color: #fff;
    box-shadow: 0px 0px 14px 0px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;

    img {
        width: 50px;
        height: 50px;
    }
}

.el-card {
    margin-top: 40px;

    .charts-index {
        height: 500px;
    }
}

.content {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        width: 49%;
        text-align: center;
    }

    .right {
        width: 49%;
        text-align: center;
    }
}
</style>
